<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style>
        .container {
            width: 800px;
            margin: 0 auto;
            font-size: 13px;
        }

        .container .message-detail {
            width: 100%;
            display: block;
            outline: none;
            resize: none;
            padding: 5px;
            box-sizing: border-box;
        }

        .message-box {
            margin-top: 10px;
            display: flex;
            justify-content: space-between;
        }

        .message-list {
            margin-top: 50px;
        }

        .message-list li {
            /* display: flex; */
            margin-bottom: 10px;
        }

        .message-list li .nick {
            width: 100px;
        }

        .message-list li .content {
            text-indent: 2em;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="message-wrap">
            <textarea class="message-detail" cols="30" rows="10"></textarea>
            <div class="message-box">
                <div class="message-tips">
                    你还可以输入50个字
                </div>
                <button class="message-send">发送</button>
            </div>
        </div>
        <div class="message-list">
            <ul class="list">
                <!-- <li>
                    <div class="nick">张三:</div>
                    <div class="content">123123</div>
                </li> -->
            </ul>
        </div>
    </div>
</body>
<script>
    // 留言板
    // 1. 留言板内输入内容时进行字符统计 => 你还可以输xx个字符   => 如果到0不能输入
    // a. 在留言板中按下按键时, onkeypress触发,但是此时字符还未输入到留言板中, 取值有偏差  => 怎么解决?   => 给留言板同时绑定键盘松开事件
    // b. 中文输入法 悬浮在留言板之上输入的 输入时仍然可以继续向留言板中追加内容     => 怎么解决? 
    //    如果输入内容超出 截取前50(messageCount),重新放回留言板 

    // 2. 发送评论 => 点击发送  快捷键发送ctrl+enter


    var messageDetail = document.getElementsByClassName("message-detail")[0];
    var messageTips = document.getElementsByClassName("message-tips")[0];
    var messageSend = document.getElementsByClassName("message-send")[0];
    var messageSend = document.getElementsByClassName("message-send")[0];
    var ul = document.querySelector(".message-list .list");

    // var a = b = 1;
    messageDetail.onkeypress = messageDetail.onkeyup = function (e) {
        var message = this.value;
        console.log(message);

        var messageCount = 50;
        var sum = messageCount - message.length;
        messageTips.textContent = `你还可以输入${sum}个字`;
        if (sum <= 0) {
            // 如果字符输入messageCount个就不让输入了
            if (e.preventDefault) {
                e.preventDefault();
            } else {
                e.returnValue = false;
            }

            // 中文输入法 => 卡bug输入超出50 => 截取前50,中心放到输入框中
            message = message.substr(0, 50);
            console.log(message);
            this.value = message;

        }

        if (e.ctrlKey && e.which == 13) {
            sendMessage();
        }
    }

    messageSend.onclick = sendMessage;



    function sendMessage() {
        var message = messageDetail.value.trim();
        if (message) { // 有内容才能发送
            // var html = `<li>
            //         <div class="nick">张三:</div>
            //         <div class="content">${message}</div>
            //     </li>`
            // ul.innerHTML += html;
            // ul.innerHTML = html + ul.innerHTML;


            // 发送之前敏感词过滤
            var keyWordList = ["CAO", "CNM", "NMD", "NND", "NMSL", "SB", "菜逼", "cai"];

            // 遍历敏感词集合 => 有就替换
            for (var i = 0; i < keyWordList.length; i++) {
                var keyWord = keyWordList[i];
                var reg = new RegExp(keyWord, "ig");
                if (reg.test(message)) {
                    var replaceStr = "";
                    for (var j = 0; j < keyWord.length; j++) {
                        replaceStr += "*";
                    }
                    message = message.replace(reg, replaceStr); //方法返回新的字符串 => 赋值给原本的变量
                }
            }

            // 检测是否有敏感词
            // var reg = new RegExp(keyWordList.join("|"), "i");
            // reg = /CAO|CNM|NMD|NND|NMSL|SB|菜逼|cai/i




            var li = document.createElement("li");
            var nickDiv = document.createElement("div");
            nickDiv.className = "nick";
            nickDiv.textContent = "张三:"
            li.appendChild(nickDiv);

            var contentDiv = document.createElement("div");
            contentDiv.className = "content";
            contentDiv.textContent = message;
            li.appendChild(contentDiv);

            // ul.append(li);
            ul.prepend(li);


            messageDetail.value = "";

        }

    }




</script>

</html>